<template>
	<view class="">
		<!-- 微信员工添加-->
		<uni-popup class="duplicateChannelsPopup" ref="duplicateChannelsPopup" background-color="#fff"
			:mask-click="false">
			<view class="dialog-wrapper">
				<view class="dialog-wechat">
					<view class="toshop_title">
						重复渠道
						<uni-icons class="closed-icon" type="clear" size="30" @click="cancelPopup()"></uni-icons>
					</view>
					<view class="toshop_form order-container">
						<view class="c-row-box">
							<view class="c-row-item">
								<view class="c-row c-row-list">
									<view class="c-row-col c-row-col-list-item">
										<view class="col-title"><text style="color: red;">*</text>选择来源</view>
										<view class="col-text">
											<uni-combox :border="false" emptyTips="没有当前来源" labelKey="title"
												valueKey="id" label="" @input="addTypeChangenewn"
												:candidates="sourceList" v-model="query.source_id"
												placeholder="请选择所在城市"></uni-combox>
											<!--                                 <picker mode="selector" :range="sourceList" range-key="title"
			                                    @change="addTypeChange">
			                                    <view>{{sourceTitel == '' ? '请选择' : sourceTitel}}</view>
			                                </picker> -->
										</view>
									</view>
								</view>
								<view class="c-row c-row-list" v-if="accountSourceList.length>0">
									<view class="c-row-col c-row-col-list-item">
										<view class="col-title"><text style="color: red;">*</text>区域</view>
										<view class="col-text">
											<picker mode="selector" :range="accountSourceList" range-key="title"
												@change="changeAccountCity">
												<view>{{areaTitle == '' ? '请选择' : areaTitle}}</view>
											</picker>
										</view>
									</view>
								</view>
								<view class="c-row c-row-list" v-if="accountList.length>0">
									<view class="c-row-col c-row-col-list-item">
										<view class="col-title"><text style="color: red;">*</text>账户</view>
										<view class="col-text">
											<picker mode="selector" :range="accountList" range-key="title"
												@change="changeAccount">
												<view>{{accountTitle == '' ? '请选择' : accountTitle}}</view>
											</picker>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="center_bottom">
						<text @click="channelsconfirm()">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import dictionary from '@/utils/dictionary.js';
	import sun from '@/utils/sun.js';

	const query = {
		source_id: "",
		account_city_id: "",
		account_id: "",
		member_id: ""
	};

	export default {
		props: {
			sourceDuplicateList: {
				type: Array,
				default: []
			}
		},
		name: "ykrecord",
		components: {},
		data() {
			let accountPickerList = dictionary.getPicker('account');
			return {
				query: Object.assign({}, query), // 搜索条件
				sourceTitel: "",
				areaTitle: "",
				accountTitle: "",
				sourceList: [],
				accountPickerList: accountPickerList,
				accountSourceList: [],
				cityList: [],
				accountList: [],
				region: [{
						id: '802',
						title: '上海'
					},
					{
						id: '1965',
						title: '广州'
					},
					{
						id: '934',
						title: '杭州'
					},
					{
						id: '821',
						title: '南京'
					},
					{
						id: '861',
						title: '苏州'
					},
					{
						id: '948',
						title: '宁波'
					},
					{
						id: '818',
						title: '奉贤'
					}
				],
				options: {}
			};
		},

		beforeMount() {
			this.dictionary = dictionary;
		},
		watch: {

		},
		onLoad(options) {

		},
		onReachBottom() {


		},
		methods: {
			// 获取预约门店
			getHotelList() {
				let that = this;
				sun.request({
					url: '/api/dictionary.picker/hotel',
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							that.hotelList = res.data.hotelList;
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			//关闭微xintianjia
			cancelPopup() {
				this.$refs.duplicateChannelsPopup.close()
			},
			showDuplicateChannelsPop(options) {
				let _this = this;
				this.options = options;
				this.$refs.duplicateChannelsPopup.open('center');
				this.getSourceList();
				_this.query.source_id = "";
				_this.sourceTitel = "";
				_this.accountSourceList = [];
				_this.query.account_city_id = "";
				_this.areaTitle = "";
				_this.query.account_id = "";
				_this.accountTitle = "";
				this.accountList = [];
				_this.query = Object.assign({}, query)
				_this.query.member_id = _this.options.member_id;
			},
			addTypeChangenewn: function(e) {
				let _this = this;
				let selectedId = e
				_this.query.source_id = selectedId;
				//_this.sourceTitel = selected.title;
				_this.accountSourceList = [];
				_this.query.account_city_id = "";
				_this.areaTitle = "";
				_this.query.account_id = "";
				_this.accountTitle = "";
				this.accountList = []
				let accountSourceAll = [];
				let cityArr = []
				//拿 到地区 
				this.accountPickerList.forEach((item, index) => {
					if (item.source_id == selectedId) {
						accountSourceAll.push(item);
					}
				});
				accountSourceAll.forEach((item, index) => {
					cityArr.push(item.city_id);
				});
				_this.cityList = cityArr;
				let newCity = new Set(cityArr);
				let cityList = [...newCity]

				this.accountSourceList = this.region.filter(item => cityList.indexOf(parseInt(item.id)) >= 0)

			},
			changeAccountCity(e) {
				let _this = this;
				let index = e.target.value;
				var selected = this.accountSourceList[index]; //获取选中的数组
				_this.query.account_city_id = selected.id;
				_this.areaTitle = selected.title;
				_this.query.account_id = "";
				_this.accountTitle = "";
				let accountList = []
				this.accountPickerList.map(item => {
					if (item.city_id == selected.id && item.source_id == _this.query.source_id) {
						accountList.push(item);
					}
				})
				this.accountList = accountList;

			},
			changeAccount(e) {
				console.log(e)
				let _this = this;
				let index = e.target.value;
				var selected = this.accountList[index]; //获取选中的数组
				console.log(selected)
				_this.query.account_id = selected.id;
				_this.accountTitle = selected.title;
				console.log(_this.accountTitle)
			},

			channelscancel() {
				this.showTochannels = false;
			},
			channelsconfirm() {
				let _this = this;
				if (_this.query.source_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入来源'
					});
					return false;
				}
				if (this.accountSourceList.length > 0 && _this.query.account_city_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入区域'
					});
					return false;
				}
				if (this.accountList.length > 0 && _this.query.account_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入账号'
					});
					return false;
				}
				let params = {};
				params = Object.assign({}, _this.query);
				sun.request({
					url: '/api/customer.source/duplicate',
					token: true,
					data: params,
					success(res) {
						uni.showToast({
							icon: "none",
							title: res.msg,

							duration: 2000
						});
						// uni.showToast和uni.navigateTo不能同时执行 用延迟
						setTimeout(() => {
							_this.$emit('getData', _this.options)
							_this.$refs.duplicateChannelsPopup.close()
						}, 1000)
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			// 获取来源
			getSourceList() {
				let _this = this;
				sun.request({
					url: '/api/customer.picker/items',
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							_this.sourceList = res.data.sourceList;
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	/deep/.uni-popup .uni-popup__wrapper {
		border-radius: 10px !important;
		width: 95%;
		background-color: white !important;

	}

	.order-container {
		min-height: 50vh;


		.c-row-box {
			.c-row-head {
				display: flex;
				align-items: center;

				.c-row-title {
					margin: 0;
					padding: 20upx 0;
					flex: 0 20%;
					color: rgba(69, 90, 100, 0.6);
					font-weight: normal;
					font-size: 14px;
					line-height: 16px;
				}

				.c-row-more {
					flex: 1;
					text-align: end;
					font-size: 24upx;

					image {
						width: 70upx;
						height: 70upx;
					}
				}
			}

			.c-row-item {
				border-radius: 8px;
				background-color: #ffffff;

				.c-row-list {
					position: relative;

					.c-row-col-list-item {
						padding: 12px 8px;
						display: flex;

						.col-title {
							min-width: 60px;
							font-size: 14px;
							color: #333;
							line-height: 20px;
						}

						.col-text {
							flex: 1;
							text-align: end;
							position: relative;
							min-width: 60px;
							font-size: 14px;
							color: #333;
							padding-right: 15px;

							input {
								height: 100%;
								font-size: 12px;
							}

							textarea {
								width: 100%;
							}
						}

						.col-images {
							flex: 1;
							display: flex;
							justify-content: left;
							flex-wrap: wrap;

							.image-item {
								margin-bottom: 8px;
							}
						}
					}
				}

				.c-row-list:after {
					position: absolute;
					right: 8px;
					left: 8px;
					bottom: 0;
					content: " ";
					border-bottom: 1px solid #ebedf0;
					transform: scaleY(0.5);
				}
			}
		}
	}

	.dialog-wechat {
		position: relative;
		margin: 0 auto;
		text-align: center;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20px;
		width: 98%;

		.toshop_title {
			width: 100%;
			padding: 15px 0;
			box-sizing: border-box;
			text-align: center;
			color: rgba(25, 25, 25, 1);
			font-size: 16px;
			background-color: #fbfbfb;

			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			position: relative;

			.closed-icon {
				position: absolute;
				left: 10px;
				top: 12px;
			}

		}

		.center_bottom {
			width: 100%;
			height: 99upx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-bottom: 20px;

			text:first-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(64, 108, 235, 1);
				line-height: 54upx;
			}

			text:last-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 54upx;
				background: rgba(64, 108, 235, 1);
			}
		}
	}
</style>
